<template>
  <div class="recommend-tuijian">
    <div class="recommend-list">
      <h1 class="list-title">热门歌单推荐</h1>
      <ul class="discUl">
        <li v-for="item in discList" class="item" :key="item.id" @click="selectItem(item)">
          <div class="icon">
            <div class="gradients"></div>
            <img v-lazy="item.picUrl">
          </div>
          <p class="play-count">
            <i class="fa fa-headphones"></i>
            {{ Math.floor(item.playCount / 10000) }}万
          </p>
          <div class="text">
            <p class="name">{{item.name}}</p>
            <!-- <p class="disc"></p> -->
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script type="text/javascript">
// 获取轮播数据
import { getDiscList } from '../../../api/recommend'
// 200验证
import { ERR_OK } from '../../../common/js/common'

import { mapMutations } from 'vuex'
export default {
  data () {
    return {
      // 推荐歌单数据
      discList: []
    }
  },
  methods: {
    _getDiscList () {
      getDiscList().then((res) => {
        if (res.status === ERR_OK) {
          this.discList = res.data.result
          // console.log(this.discList)
        }
      })
    },
    selectItem (item) {
      this.$router.push({
        path: `/lunbo/${item.id}`
      })
      // console.log(item)
      this.setDisc(item)
    },
    ...mapMutations({
      setDisc: 'SET_DISC'
    })
  },
  created () {
    // this._getBanner()
    this._getDiscList()
  }
}

</script>

<style lang="less" scoped>
@import '~@/common/stylus/variable.less';

.discUl {
  padding: 0;
}
.recommend-list {
  position: relative;
  text-align: center;
  box-sizing: border-box;
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: 0;
  .list-title {
    height: 52px;
    line-height: 52px;
    padding-left: 1.5%;
    font-size: @font-size-medium;
    text-align: left;
    font-weight: bold;
    color: @color-text;
  }
}
.item {
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  width: 33%;
  padding: 0 1%;
  .icon {
    position: relative;
    display: inline-block;
    width: 100%;
    margin-bottom: 5px;
    .gradients {
      position: absolute;
      top: 0;
      width: 100%;
      height: 35px;
      border-radius: 3px;
      background: linear-gradient(rgba(109, 109, 109, 0.4),rgba(255, 255, 255, 0));
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 3px;
    }
  }
}
.play-count {
  position: absolute;
  margin-top: 6px;
  top: 5px;
  right: 8px;
  font-size: @font-size-small-s;
  color: @color-text-l
}
.text {
  margin: 1px;
  float: left;
  line-height: 20px;
  text-align: left;
  height: 42px;
  line-height: 15px;
  overflow: hidden;
  margin-bottom: 10px;
  font-size: @font-size-small;
  .name {
    margin: 0;
  }
}
</style>
